<template>
  <h3>当前Num的值:{{ num }}</h3>
  <button @click="num++">Num ++ </button>
  <h3>当前MSG的值:{{ msg }}</h3>
  <button @click="msg += '!'">MSG 后加个 ! </button>
  <h3>当前Person中name的值:{{ person.name }}</h3>
  <button @click="person.name += '~'">Name 后加个 ~ </button>
  <h3>当前Person中age的值:{{ person.age }}</h3>
  <button @click="person.age++">年龄 ++ </button>
  <h3>当前Person-job-job1的salary值:{{ person.job.job1.salary }}K</h3>
  <button @click="person.job.job1.salary++">job1涨薪</button>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  name: 'School-Comp',
  watch: {
    // num(newVal, oldVal) {
    //   console.log("Vue2 watch 简写， num被修改了",newVal, oldVal);
    // },
    // num: {
    //   immediate: true, // 立即执行，第一次渲染时
    //   deep: true, // 深度监听，监听对象时，监听的是对象里面的属性
    //   handler(newVal, oldVal) {
    //     console.log("Vue2 watch 全写， num被修改了", newVal, oldVal);
    //   }
    // }
  },
  setup() {
    // 数据
    let num = ref(0);
    let msg = ref("你好：");


    // 情况一：监视ref所定义的一个响应式数据
    watch(num, (newVal, oldVal) => {
      console.log("Vue3 watch一个响应式数据 简写， num被修改了", newVal, oldVal);
    });

    watch(num, (newVal, oldVal) => {
      console.log("Vue3 watch一个响应式数据 全写， num被修改了", newVal, oldVal);
    }, {
      immediate: true
    });

    // 情况二：监视ref所定义的多个响应式数据
    watch([num, msg], (newVal, oldVal) => {
      console.log("Vue3 watch多个响应式数据 简写， num 或 msg被修改了", newVal, oldVal);
    });

    let person = ref({
      name: "张三",
      age: 18,
      job: {
        job1: {
          salary: 10,
        }
      }
    });

    console.log("Vue3 watch一个ref创建的对象", person);

    // 方法一：
    // watch(person, (newVal, oldVal) => {
    //   console.log("Vue3 watch一个ref创建的对象， person被修改了：开启深度监视", newVal, oldVal);
    // }, {
    //   deep: true
    // });

    // 方法二：
    watch(person.value, (newVal, oldVal) => {
      console.log("Vue3 watch一个ref创建的对象， person被修改了：.value", newVal, oldVal);
    });

    return { num, msg, person }

  },
}
</script>

<style></style>
